<template>
  <view class="page-container">
    <!-- 顶部标签页导航 -->
    <view class="segmented-control-wrapper">
      <uni-segmented-control :current="currentTab" :values="tabs" @clickItem="onClickTab" styleType="text"
                             activeColor="#007aff"></uni-segmented-control>
    </view>

    <!-- 内容区域 -->
    <view class="content">
      <!-- 基础信息 -->
      <view v-show="currentTab === 0" class="tab-content">
        <view class="profile-list">
          <view class="list-item">
            <text class="item-label">真实姓名</text>
            <text class="item-value">{{ user.name }}</text>
          </view>
          <view class="list-item">
            <text class="item-label">身份证号</text>
            <text class="item-value">{{ user.idCard }}</text>
          </view>
          <view class="list-item">
            <text class="item-label">联系电话</text>
            <text class="item-value">{{ user.phoneNumber }}</text>
          </view>
          <view class="list-item">
            <text class="item-label">现居地址</text>
            <text class="item-value">{{ user.currentAddress }}</text>
          </view>
          <view class="list-item">
            <text class="item-label">性别</text>
            <text class="item-value">{{ user.gender }}</text>
          </view>
          <view class="list-item">
            <text class="item-label">出生日期</text>
            <text class="item-value">{{ user.dateOfBirth }}</text>
          </view>
        </view>
      </view>

      <!-- 健康信息 -->
      <view v-show="currentTab === 1" class="tab-content">
        <view class="two-column-list">
          <view class="column-row">
            <view class="column-item">
              <text class="item-label">身高</text>
              <text class="item-value">{{ healthInfo.height }} cm</text>
            </view>
          </view>
          <view class="column-row">
            <view class="column-item">
              <text class="item-label">体重</text>
              <text class="item-value">{{ healthInfo.weight }} kg</text>
            </view>
          </view>
          <view class="column-row">
            <view class="column-item">
              <text class="item-label">血型</text>
              <text class="item-value">{{ healthInfo.bloodType }}</text>
            </view>
          </view>
          <view class="column-row">
            <view class="column-item">
              <text class="item-label">RH因子</text>
              <text class="item-value">{{ healthInfo.rh }}</text>
            </view>
          </view>
          <view class="column-row single">
            <view class="column-item">
              <text class="item-label">过敏史</text>
              <text class="item-value">{{ healthInfo.allergyHistory }}</text>
            </view>
          </view>
          <view class="column-row single">
            <view class="column-item">
              <text class="item-label">既往病史</text>
              <text class="item-value">{{ healthInfo.pastMedicalHistory }}</text>
            </view>
          </view>
          <view class="column-row single">
            <view class="column-item">
              <text class="item-label">就诊史</text>
              <text class="item-value">{{ healthInfo.medicalHistory }}</text>
            </view>
          </view>
          <view class="column-row single">
            <view class="column-item">
              <text class="item-label">家族病史</text>
              <text class="item-value">{{ healthInfo.familyHistory }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import UniSegmentedControl from "../../uni_modules/uni-segmented-control/components/uni-segmented-control/uni-segmented-control.vue";
import {queryResidentProfile} from "../../api/metrices";
import {mapState} from 'vuex';

export default {
  name: "HeathDetail",
  components: {UniSegmentedControl},
  data() {
    return {
      currentTab: 0,
      tabs: ['基础信息', '健康信息'], // 修正：只保留两个标签页
      // 补全健康信息数据
      healthInfo: {}
    };
  },
  computed: {
    ...mapState({
      // 用户信息
      user: state => state.userInfo
    })
  },
  onLoad() {
    this.fetchProfileData(this.user.residentId);
  },
  methods: {
    onClickTab(e) {
      if (this.currentTab !== e.currentIndex) {
        this.currentTab = e.currentIndex;
      }
    },
    goToEdit() {
      const residentId = 1;
      uni.navigateTo({
        url: `/pages/my/edit-detail?resident_id=${residentId}`
      });
    },
    async fetchProfileData(userId) {
      let {data:data} = await queryResidentProfile(userId);
      this.healthInfo = data.data;
    }
  }
}
</script>

<style scoped>
/* 页面整体样式 */
.page-container {
  background-color: #f5f8ff;
  min-height: 100vh;
}
.segmented-control-wrapper {
  background-color: #ffffff;
  padding: 0 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
  position: sticky;
  top: 0;
  z-index: 99;
}
.content {
  padding: 24rpx;
}

/* 基础信息样式 */
.profile-list {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 0 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}
.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}
.list-item:last-child {
  border-bottom: none;
}
.item-label {
  font-size: 30rpx;
  color: #666;
}
.item-value {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
}

/* 健康信息两列布局样式 */
.two-column-list {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 0 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}
.column-row {
  display: flex;
  border-bottom: 1rpx solid #f0f0f0;
}
.column-row:last-child {
  border-bottom: none;
}
.column-item {
  display: flex;
  align-items: center;
  padding: 32rpx 0;
  flex-basis: 50%;
}
.column-row.single .column-item {
  flex-basis: 100%;
}
.column-item .item-label {
  width: 160rpx;
  color: #666;
}
.column-item .item-value {
  color: #333;
  font-weight: 500;
}
</style>

